<template>
    <div class="wrap">
      <span @click='shopcart' class="ospan">&lt;</span>
      <ul class="list">
   

         <swiper :options="swiperOption" ref="mySwiper">
          <!-- slides -->
           <swiper-slide  v-for='item of detail.imageUrls' :key='item.id'><img :src="item" alt="" /></swiper-slide>
        
           <div class="swiper-pagination"  slot="pagination"></div>
           <div class="swiper-scrollbar"   slot="scrollbar"></div>
        </swiper> 
      </ul>
        <div class="pd">
          <a class="a1" href="#"><i class="iconfont icon-xinpin"></i>{{detail.title}}</a>
          <a class="a2" href="#"><i class="iconfont icon-daifukuan"></i>惊爆价：{{detail.price}}</a>
          <a class="a3" href="#"><i class="iconfont icon-xiaomi"></i>{{detail.sellerScreenName}}</a>

        </div>

        <div>
            <ul class="list2">
                  <li v-for='item of detail.imageUrls' :key='item.id'>
                    <img :src="item" alt="" />
                  </li>
            </ul>

        </div>

        <div class="foot">
          <p>------我是有底线的------</p>
        </div>
       
        <joinCart  :datashopp='dataList'></joinCart>

    </div>
</template>

<script>
import joinCart from './components/joinCart'
import Vue from "vue";

//轮播图插件 
import VueAwesomeSwiper from "vue-awesome-swiper";
//  需要样式


import { swiper, swiperSlide } from "vue-awesome-swiper";
Vue.use(VueAwesomeSwiper);
import "swiper/dist/css/swiper.css";

export default {
  name: "Detail",
  data() {
    return {
      dataList:{},
      detail: {},

       swiperOption: {
        //   // ...
          autoplay:3000,
        //   direction : 'vertical',
          grabCursor:true,
          setWrapperSize:true,
          sutoHeight:true,
          pagination: ".swiper-pagination", // // 如果需要分页器
          paginationClickable:true,
          //  nextButton: ".swiper-button-next",// // 如果需要前进后退按钮
          // prevButton: ".swiper-button-prev",
        //    scrollbar: ".swiper-scrollbar", // // 如果需要滚动条
          mousewheelControl:true,
          observeParents:true,
        //如果自行设计了插件，那么插件的一些配置相关的参数，也应该出现在这个对象中，如下
          debugger:true,
          //swiper各种回调函数也可以出现在这个对象夏侯昂，和swiper官方一样
          onTransitionStart(swiper){
              console.log(swiper)
          },
          autoplay: 5000,
          initialSlide: 1,
          pagination:{
            el:".swiper-pagination"
          },
          autoplay:{
            delay:1500,
            disableOnInteraction:false
          },
          loop:true

      },
    }
  },
  methods: {
    getData() {
      this.$axios
        .get("static/xiaomi.json", {
          params: {
            id: this.$route.params.id
          }
        })
        .then(redata => {
          let arr = redata.data.data;
          for (let i = 0; i < arr.length; i++) {
            if (arr[i].id === this.$route.params.id) {
              this.detail = arr[i];
              this.dataList=arr[i];
            }
          }
        });
    },
    shopcart(){
      this.$router.go(-1);
      this.$store.commit('getisflag',true)
    }
  },
  watch: {
    $route() {
      this.getData();
    }
  },
  created() {
    
    console.log(this.$store.state.list)

    // console.log(this.detail)
    // console.log(this.$route.params);
    this.getData();
  },
  components:{
    joinCart ,
    swiper,
    swiperSlide
  }
 
};
</script>

<style lang='scss' scoped>
$appwidth: 375;

@function pxtovw($p) {
  @return (100 / $appwidth * $p) * 1vw;
}

.ospan{
  display: inline-block;
  font-size: pxtovw(30);
  position: fixed;
  width: pxtovw(20);
  height: pxtovw(30);
  z-index: 10;
}
.wrap{
    width: 100%;
    .list{
         
            width: 100%; 
            height: pxtovw(210);
            overflow: hidden;
        
              width: 100%;
              height: pxtovw(210);
              text-align: center;
              background: #eee;
              img{

                width: pxtovw(200);
                height: pxtovw(200);
              }
            
         
      }
      .foot{
        height: pxtovw(60);
        margin-bottom:pxtovw(50); 
        line-height: pxtovw(60);
        color: #aaa;
        background: #eee;
        width: 100%;
        text-align: center;
      }

      .pd{
        width: 100%;
        a{
          display: inline-block;
          text-decoration: none;
          color: #333;
          font-size: pxtovw(14);
        }
        .a1{
          .icon-xinpin{
            color: orangered;
           
          }
        }
        .a2{
             color: orange;

          .icon-daifukuan{
             color: orange;
          }
         
        }

         .a3{
            position: absolute;
            right: pxtovw(10);
        
           
             i{
               color: red;
             }
        }
      
      }

      .list2{
        li{
          width: 100%;
          height: pxtovw(300);
          margin: pxtovw(20) 0;
          img{
            width: 100%;
            height: 100%;
          }
        }
      }


}


</style>
